<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test.jsx</title>
<meta name="generator" content="KF5::SyntaxHighlighting (JavaScript React)"/>
</head><body style="color:#1f1c1b"><pre>
<span style="color:#898887;">// JavaScript React</span>

<span style="color:#898887;">/** </span><span style="color:#ca60ca;font-weight:bold;">@author</span><span style="color:#898887;"> Willy </span><span style="font-weight:bold;">&lt;willy@wmail.com&gt;</span>
<span style="color:#898887;">  * </span><span style="color:#ca60ca;">@url</span><span style="color:#898887;"> https://reactjs.org/ **/</span>

<span style="color:#ff5500;">import</span> React <span style="color:#ff5500;">from</span> <span style="color:#bf0303;">'react'</span>;
<span style="color:#ff5500;">import</span> { PhotoStory, VideoStory } <span style="color:#ff5500;">from</span> <span style="color:#bf0303;">'./stories'</span>;

<span style="font-weight:bold;">function</span> <span style="color:#0057ae;">Story</span>(props) {
  <span style="font-weight:bold;">const</span> SpecificStory = components[<span style="color:#0057ae;">props</span>.<span style="color:#0057ae;">storyType</span>];
  <span style="font-weight:bold;">return </span><span style="color:#644a9b;font-weight:bold;">&lt;SpecificStory</span> <span style="color:#006e28;">story</span>=<span style="color:#0057ae;">{</span> <span style="color:#0057ae;">props</span>.<span style="color:#0057ae;">story</span> <span style="color:#0057ae;">}</span> <span style="color:#006e28;">attr2</span>=<span style="color:#bf0303;">&quot;</span><span style="color:#b08000;">&amp;ref;</span><span style="color:#bf0303;">&quot;</span> <span style="color:#006e28;">attr3</span>=<span style="color:#bf0303;">&quot;Hello\n&quot;</span> <span style="color:#644a9b;font-weight:bold;">/&gt;</span>;
} 

<span style="font-weight:bold;">function</span> 
<span style="color:#644a9b;font-weight:bold;">&lt;Tag</span> <span style="color:#006e28;">attr1</span>=<span style="color:#0057ae;">{</span> <span style="font-weight:bold;">&lt;tag/&gt;</span> <span style="font-weight:bold;">function</span> &lt;noTag/&gt; <span style="font-weight:bold;">return</span> <span style="font-weight:bold;font-style:italic;">class</span> <span style="font-weight:bold;">var</span> <span style="color:#b08000;">0x123</span> { } &amp;noRef; <span style="color:#0057ae;">hello</span>() <span style="color:#0057ae;">React</span>.<span style="color:#0057ae;">Component</span>() <span style="color:#0057ae;">}</span> <span style="color:#006e28;">attr2</span>=<span style="color:#bf0303;">&quot;</span><span style="color:#b08000;">&amp;ref;</span><span style="color:#bf0303;">&quot;</span><span style="color:#644a9b;font-weight:bold;">&gt;</span>
	/* no comment*/ function <span style="font-weight:bold;">&lt;tag/&gt;</span> return class var 0x123 <span style="color:#b08000;">&amp;ref;</span> hello() React.Component()
	.<span style="font-weight:bold;">&lt;tag/&gt;</span> anyWord <span style="font-weight:bold;">&lt;tag/&gt;</span>
	<span style="color:#0057ae;">{</span> <span style="font-weight:bold;">function</span> &lt;tag&gt; <span style="font-weight:bold;">return</span> <span style="font-weight:bold;font-style:italic;">class</span> <span style="font-weight:bold;">var</span> <span style="color:#b08000;">0x123</span> <span style="color:#0057ae;">hello</span>() <span style="color:#0057ae;">React</span>.<span style="color:#0057ae;">Component</span>() <span style="color:#0057ae;">}</span> 
<span style="color:#644a9b;font-weight:bold;">&lt;/Tag&gt;</span>

<span style="font-weight:bold;">&lt;tag1&gt;</span> <span style="font-weight:bold;">&lt;/tag1&gt;</span>
<span style="font-weight:bold;">&lt;tag1&gt;</span> <span style="font-weight:bold;">&lt;/</span><span style="color:#bf0303;text-decoration:underline;">Tag$</span><span style="font-weight:bold;">&gt;</span>
<span style="color:#644a9b;font-weight:bold;">&lt;Tag$&gt;</span> <span style="color:#644a9b;font-weight:bold;">&lt;/tag&gt;</span>

<span style="font-weight:bold;">&lt;tag</span><span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">attr1</span><span style="color:#898887;">/*comment*/</span>= <span style="color:#898887;">/*comment*/</span><span style="color:#bf0303;">&quot;value&quot;</span><span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">attr2</span> <span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">attr3</span>=<span style="color:#bf0303;">'a'</span> <span style="color:#006e28;">key</span><span style="color:#898887;">/*comment*/</span><span style="color:#006e28;">key2</span> <span style="font-weight:bold;">/&gt;</span>

<span style="color:#898887;">// Detect Valid tags</span>

<span style="color:#898887;">/* comment */</span> <span style="font-weight:bold;">&lt;tag&gt;&lt;/tag&gt;</span>
{ <span style="color:#898887;">/* comment </span>
<span style="color:#898887;">	*/</span> <span style="color:#644a9b;font-weight:bold;">&lt;Tag</span> <span style="color:#644a9b;font-weight:bold;">/&gt;</span> 
	word &lt;noTag/&gt; . &lt;noTag/&gt; } &lt;noTag/&gt;
<span style="font-weight:bold;">return </span><span style="color:#898887;">/* comment</span>
<span style="color:#898887;">	multiline */</span> <span style="font-weight:bold;">&lt;tag/&gt;</span> <span style="color:#898887;">/* comment */</span> <span style="color:#644a9b;font-weight:bold;">&lt;Tag/&gt;</span>
&amp;&amp; <span style="color:#898887;">/*comment*/</span> <span style="color:#644a9b;font-weight:bold;">&lt;Tag/&gt;</span>
&amp; <span style="color:#898887;">/*comment*/</span> &lt;noTag/&gt;

  <span style="font-weight:bold;">&lt;tag/&gt;</span>
{ <span style="font-weight:bold;">&lt;hello&gt;</span>Hello<span style="font-weight:bold;">&lt;/hello&gt;</span> }
?<span style="color:#644a9b;font-weight:bold;">&lt;Tag</span> <span style="color:#644a9b;font-weight:bold;">/&gt;</span>;
[ <span style="font-weight:bold;">&lt;tag</span> <span style="font-weight:bold;">/&gt;</span>  ( <span style="font-weight:bold;">&lt;tag</span> <span style="font-weight:bold;">/&gt;</span>
,<span style="color:#644a9b;font-weight:bold;">&lt;Tag/&gt;</span>    =<span style="color:#644a9b;font-weight:bold;">&lt;Tag/&gt;</span>
&amp;&amp;<span style="font-weight:bold;">&lt;tag/&gt;</span>   ||<span style="font-weight:bold;">&lt;tag/&gt;</span>
<span style="font-weight:bold;">return </span><span style="font-weight:bold;">&lt;tag/&gt;</span> ;
<span style="color:#ff5500;">default</span><span style="font-weight:bold;">&lt;tag/&gt;</span> ;
<span style="color:#644a9b;font-weight:bold;">&lt;Tag&gt;</span> <span style="font-weight:bold;">&lt;tag&gt;</span> <span style="color:#644a9b;font-weight:bold;">&lt;tag$/&gt;</span> <span style="font-weight:bold;">&lt;/tag&gt;</span> return <span style="color:#644a9b;font-weight:bold;">&lt;/Tag&gt;</span>

anyWord&lt;noTag&gt;
anyWord<span style="color:#898887;">/*comment*/</span> &lt;noTag/&gt;
.&lt;noTag&gt;
&amp;&lt;notag&gt; | &lt;noTag/&gt;
% <span style="color:#898887;">/* comment*/</span> &lt;noTag/&gt;

<span style="color:#644a9b;font-weight:bold;">&lt;C</span>&lt;<span style="color:#644a9b;font-weight:bold;">number</span>&gt;<span style="color:#644a9b;font-weight:bold;">/&gt;</span>
<span style="color:#644a9b;font-weight:bold;">&lt;C</span>&lt;<span style="color:#644a9b;font-weight:bold;">number</span>&gt;<span style="color:#644a9b;font-weight:bold;">&gt;</span> <span style="color:#644a9b;font-weight:bold;">&lt;/C&gt;</span>
<span style="color:#644a9b;font-weight:bold;">&lt;C</span>
<span style="color:#bf0303;text-decoration:underline;">&lt;error</span> <span style="color:#644a9b;font-weight:bold;">/&gt;</span>

<span style="color:#898887;">// Non-ASCII tag name &amp; attribute</span>
<span style="color:#644a9b;font-weight:bold;">&lt;日本語&gt;&lt;/日本語&gt;</span>;
<span style="color:#644a9b;font-weight:bold;">&lt;Component</span> <span style="color:#006e28;">本本:本-本</span> <span style="color:#006e28;">aa本:本</span> <span style="color:#006e28;">aa:aa</span> <span style="color:#644a9b;font-weight:bold;">/&gt;</span>

<span style="color:#644a9b;font-weight:bold;">&lt;Namespace.DeepNamespace.Component</span> <span style="color:#644a9b;font-weight:bold;">/&gt;</span>;
<span style="color:#644a9b;font-weight:bold;">&lt;Component</span> <span style="color:#0057ae;">{</span> ... <span style="color:#0057ae;">x</span> <span style="color:#0057ae;">}</span> <span style="color:#006e28;">y</span>
=<span style="color:#0057ae;">{</span><span style="color:#b08000;">2</span> <span style="color:#0057ae;">}</span> <span style="color:#006e28;">z</span> <span style="color:#644a9b;font-weight:bold;">/&gt;</span>;

<span style="font-weight:bold;font-style:italic;">let</span> k1 = <span style="font-weight:bold;">&lt;div&gt;</span> <span style="font-weight:bold;">&lt;h2&gt;</span> Hello <span style="font-weight:bold;">&lt;/h2&gt;</span> <span style="font-weight:bold;">&lt;h1&gt;</span> world <span style="font-weight:bold;">&lt;/h1&gt;&lt;/div&gt;</span>;
<span style="font-weight:bold;font-style:italic;">let</span> k2 = <span style="color:#644a9b;font-weight:bold;">&lt;Button&gt;</span> <span style="font-weight:bold;">&lt;h2&gt;</span> Hello <span style="font-weight:bold;">&lt;/h2&gt;</span> <span style="color:#644a9b;font-weight:bold;">&lt;/Button&gt;</span>;

<span style="color:#898887;">// Empty tags</span>
<span style="font-weight:bold;">&lt;&gt;&lt;/&gt;</span>; <span style="color:#898887;">// no whitespace</span>
<span style="font-weight:bold;">&lt;    &gt;&lt;/   &gt;</span>; <span style="color:#898887;">// lots of whitespace</span>
&lt; <span style="color:#898887;">/*starting wrap*/</span> &gt;&lt;/ <span style="color:#898887;">/*ending wrap*/</span>&gt;; <span style="color:#898887;">// comments in the tags</span>
<span style="font-weight:bold;">&lt;&gt;</span>hi<span style="font-weight:bold;">&lt;/&gt;</span>; <span style="color:#898887;">// text inside</span>
<span style="font-weight:bold;">&lt;&gt;&lt;span&gt;</span>hi<span style="font-weight:bold;">&lt;/span&gt;&lt;div&gt;</span>bye<span style="font-weight:bold;">&lt;/div&gt;&lt;/&gt;</span>; <span style="color:#898887;">// children</span>
<span style="font-weight:bold;">&lt;&gt;&lt;span&gt;</span>1<span style="font-weight:bold;">&lt;/span&gt;&lt;&gt;&lt;span&gt;</span>2.1<span style="font-weight:bold;">&lt;/span&gt;&lt;span&gt;</span>2.2<span style="font-weight:bold;">&lt;/span&gt;&lt;/&gt;&lt;span&gt;</span>3<span style="font-weight:bold;">&lt;/span&gt;&lt;/&gt;</span>; <span style="color:#898887;">// nested fragments</span>
<span style="font-weight:bold;">&lt;&gt;</span>#<span style="font-weight:bold;">&lt;/&gt;</span>; <span style="color:#898887;">// # would cause scanning error if not in jsxtext</span>

<span style="color:#898887;">// Tags after substitutions in templates</span>
<span style="color:#bf0303;">`aaa</span><span style="color:#3daee9;">${</span><span style="font-weight:bold;">&lt;tag&gt;&lt;/tag&gt;</span><span style="color:#898887;">//comment</span>
    <span style="color:#898887;">/*comment*/</span><span style="color:#644a9b;font-weight:bold;">&lt;A/&gt;</span><span style="color:#3daee9;">}</span><span style="color:#bf0303;">`</span>

<span style="color:#898887;">// Don't highlight tags within variable declaration</span>
<span style="font-weight:bold;font-style:italic;">let</span> myIdentity: &lt;T&gt;(arg: T) <span style="font-weight:bold;">=&gt;</span> T = identity;
<span style="font-weight:bold;">var</span> myIdentity: &lt;U&gt;(arg: U) <span style="font-weight:bold;">=&gt;</span> U = identity;
<span style="font-weight:bold;">const</span> myIdentity: {&lt;T&gt;(<span style="color:#0057ae;">arg</span>: T): T} = identity;

<span style="color:#898887;">// Don't highlight tags within interfaces and classes</span>
<span style="font-weight:bold;font-style:italic;">interface</span> GenericIdentityFn {
    &lt;T&gt;(<span style="color:#0057ae;">arg</span>: T): T;
    &lt;noTag /&gt;
}
<span style="font-weight:bold;font-style:italic;">class</span> Handler {
    <span style="color:#0057ae;">info</span>: &lt;T&gt;(<span style="color:#0057ae;">arg</span>: T): T &lt;noTag /&gt;;
    <span style="font-weight:bold;">&lt;tag&gt;</span> <span style="font-weight:bold;">&lt;/tag&gt;</span>
}
</pre></body></html>
